@innovastudio/contentbuilder

ContentBuilder.js 5.5.30

Note: If you have Source Code package (Super license), please refer to:

readme-sourcecode.txt

for additional information.

Documentation:

https://demo.innovastudio.com/docs/ContentBuilder.pdf

Getting started

You can choose to run the HTML, PHP or JavaScript project examples:

A. To try the HTML example:

1. Unzip the project files:

   - ContentBuilder/

2. Open terminal, go to the project directory and install the required server dependencies.
   The example is using Node.js server.

    > cd ContentBuilder

    > npm install

        Note: To run this command, you need to have NPM installed.
        Download & install NPM from https://nodejs.org/en/download/.

3. Run the server:

    > node server.js

4. Open from your browser:

    http://localhost:8081/example1.html (Default example)

    or

    http://localhost:8081/example-canvas.html (New Canvas Mode example)

B. To try the PHP Example, open from your browser:

http://localhost/.../public/example2.php

If you're using Visual Studio Code, you can use the PHP Server extension.

C. To try the JavaScript project, install the dependencies and start the project:

    > npm install

    > npm start

A browser window will be opened with the example running.

Note:
    The code for this project is:
        
        src/index.js

    The project is using Node.js server:

        server.js

NOTE:

• To use the AI Assistant:

  1. Obtain the OpenAI API key from https://openai.com.

  2. Update the .env file with your API key.

      OPENAI_API_KEY=YOUR_API_KEY
     

     Alternatively, if you're using PHP, update the api/config.php file with your API key:

      $OPENAI_API_KEY = 'YOUR_API_KEY';
     

  3. Ensure that the sendCommandUrl parameter is set with the API endpoint for using the OpenAI API:

     const builder = new ContentBuilder({ // ... sendCommandUrl: '/sendcommand', });

     If you're using PHP:

     const builder = new ContentBuilder({ // ... sendCommandUrl: 'api/sendcommand.php', });

     Most examples in the package have this parameter configured, so you can run and test them. Examples in React/Next.js and Laravel are also provided.

     The JavaScript project example in this package uses Node.js for the API endpoint /sendcommand. Please refer to the Node.js file:

      server.js
      
     

• For speech recognition (if dictation is enabled), the browser's built-in speech recognition is used. However, certain browsers may not support this feature. We recommend using Deepgram for browser compatibility and accuracy. Obtain the Deepgram API key from https://deepgram.com and update the .env file with your API key. Then enable the 'speechTranscribeUrl' parameter in the ContentBuilder initialization (src/index.js).

• To use the AI image generation:

  1. Obtain the API key from https://getimg.ai/tools/api.

  2. Update the .env file with your API key.

      GETIMG_API_KEY=YOUR_API_KEY
     

     Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:

      $GETIMG_API_KEY = 'YOUR_API_KEY';
     

• New Canvas Mode

Canvas mode is a new option for seamless (gridless) block positioning. Simply activate with:

const builder = new ContentBuilder({
    container: '.container',
    canvas: true,
    previewURL:'preview-canvas.html'
});

And include additional JavaScript and CSS:

<link href="block/block.css" rel="stylesheet">
<script src="block/block.js">

You can try 'example-canvas.html' in the package.

• IMPORTANT:

  Please add your own security to the API endpoints (public/api/)!

---

SUPPORT:

Email us at: [e-mail]